<template>
	<view class="content">
		<view>
			
			<image :src="videoInfo.img" mode="aspectFill" class="img"></image>
			<view class="pd15">
				<view class="cl-w ft18 ftw600">{{videoInfo.name}}</view>
				<view class="text ft14 mt12">{{videoInfo.story}}</view>
			</view>
 			<u-tabs :list="tabs" lineWidth="30" lineColor="rgba(26, 140, 239, 1)" :activeStyle="{
            color: '#fff',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#fff',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @click="clickTab"></u-tabs> 

			<view class="charts-box">
				<!-- <qiun-data-charts type="area" :opts="{extra:{area:{type:'curve',addLine:true,gradient:true}}}"
				:chartData="chartsDataLine2" :echartsH5="true" :echartsApp="true" /> -->
				<qiun-data-charts type="area" :opts="{extra:{area:{type:'curve',addLine:true,gradient:true}}}"
					:chartData="chartsDataLine2" />
			</view>
		</view>

	</view>
</template>

<script>
	import configs from "@/common/config.js"
	let audo = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				sharedata: {
					type: 2,
					strShareUrl: "",
					strShareTitle: this.$t("text.fenx1"),
					strShareSummary: this.$t('text.fenx2'),
					strShareImageUrl: ""
				},
				fenji: 1,
				controls: true,
				originList: [], // 源数据
				displaySwiperList: [], // swiper需要的数据
				displayIndex: 0, // 用于显示swiper的真正的下标数值只有：0，1，2。
				originIndex: 0, // 记录源数据的下标
				windowWidth: 0,
				windowHeight: 0,
				current: 0,
				oid: 0,
				isplay: true, //是否自动播放下一个视频
				playCount: 2, //剩余多少视频加载视频列表
				nodate: true, //true 有数据 
				duration: 500,
				issp: '',
				isqp: true,
				page: 1,
				urls: configs.webUrl,

				baymid: 0,
				scrollTop: 0,
				vid: 0,
				mid: 0,
				isbuylx: 0, //大于0单节购买  0全集
				safeArea: 0,
				uid: 0,
				videoInfo: {},
				tabs: [{
						name:this.$t('text.bfl'),
					},
					{
						name: this.$t('text.dashangshouyi')
					}
				],
				selectIndex: 0,
				chartsDataLine2: {
					// "categories": ["2016", "2017", "2018", "2019", "2020", "2021"],
					// "series": [{
					// 	"name": this.$t('text.bfl'),
					// 	"data": [35, 8, 25, 37, 4, 20]
					// }, {
					// 	"name": this.$t('"text.dashangshouyi'),
					// 	"data": [70, 40, 65, 100, 44, 68]
					// }]
				},
			};
		},
		onLoad(e) {
			this.vid = e.vid
			this.windowWidth = uni.getSystemInfoSync().windowWidth
			this.windowHeight = uni.getSystemInfoSync().windowHeight - this.safeArea
			//this.Recommend();
		},
		onShow() {
			this.Recommend()
		},
		methods: {
			clickTab(e) {
				this.selectIndex = e.index
				console.log(e)
			},
			Recommend() {
				var uid = 0;
				if (uni.getStorageSync("userinfo")) {
					uid = uni.getStorageSync("userinfo").id
				}
				this.$httpas.post2({
					data: {
						do: 'Creator',
						op: 'video_info',
						id: this.vid
					},
					success: res => {
						this.videoInfo =  res
						 this.chartsDataLine2 =  res.categories
						
					}
				})
			},
			denglu() {
				uni.showModal({
					title: this.$t('play.win'),
					content: this.$t('play.lookdl'),
					showCancel: true,
					confirmText: this.$t('play.dl'),
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}
					}
				});

			}
		},
	};
</script>

<style>
	page {
		background: #000000;
	}

	.img {
		width: 100%;
	}

	.text {
		color: rgba(255, 255, 255, 0.6);
	}

	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>